;(function(node) {

  var TodoList = function() {
    var _self = this; // 执行期上下文
        
    this.node = node;

    this.showInputFlag = false; // 输入框显示隐藏状态
    this.isEdit = false; // 是否编辑状态
    this.curIdx = 0; // 当前编辑的第几项的下标
    this.curLiConten = null; // 当前编辑的li的value值

    // 默认配置项
    this.dConfig = {
      "plusBtn": "",
      "inputArea": "",
      "addBtn": "",
      "list": "",
      "itemClass": ""
    }
    this.config = this.getConfig();

    // 判断用户是否配置默认参数配置项
    for(var key in this.dConfig) {
      if(!this.config.hasOwnProperty(key)) {
        return alert(errorInfo(key));
      }
    }

    this.setConfig();
    this.itemClass = this.config.itemClass;

    // 点击新增显示隐藏todoList
    addEvent(this.plusBtn, 'click', function() {
      _self.showInput();
    });

    // 添加list
    addEvent(this.addBtn, 'click', function() {
      _self.addBtnClick();
    });

    // 给list绑定点击事件，事件委托
    addEvent(this.oList, 'click', function(e) {
      var e = e || window.event,
          tar = e.target || e.srcElement;

      _self.liClick(tar);
    });
  }

  TodoList.prototype = {
    getConfig: function() {
      return JSON.parse(this.node.getAttribute('data-config'));
      // this.node.dataset.config; // 也可以使用H5新增方法，兼容性不太好
    },

    setConfig: function() {
      var config = this.config, // 缓存原型上保存的config
          node = this.node; // 缓存根元素节点

      // 输入框跟提交按钮区域
      this.inputArea = node.getElementsByClassName(config.inputArea)[0];
      // 提交按钮
      this.addBtn = this.inputArea.getElementsByClassName(config.addBtn)[0];
      // 整个todolist显示与否
      this.plusBtn = node.getElementsByClassName(config.plusBtn)[0];
      // todolist区域
      this.oList = node.getElementsByClassName(config.list)[0];
      // 输入框
      this.content = this.inputArea.getElementsByClassName('textInput')[0];
      // console.log(this);
    },

    // 显示隐藏input框
    showInput: function() {
      if(this.showInputFlag) {
        setInputShow.call(this, 'close');

        // 隐藏list
        this.oList.style.display = 'none';
      }else {
        setInputShow.call(this, 'open');

        // 显示list
        this.oList.style.display = 'block';
        // input聚焦
        this.content.focus();
      }
    },

    // 增加list方法
    addBtnClick: function() {
      var content = this.content.value, // 输入框的值
          contentLen = content.length, // 输入框的值的长度
          oItems = this.oList.getElementsByClassName('item'), // 所有的li
          itemLen = oItems.length, // li的个数
          text; // 输入的值

      if(contentLen <= 0) {
        return alert('请输入待办事项');
      }

      // li存在的时候，才需要去重
      if(itemLen > 0) {
        for(var i = 0; i < itemLen; i ++) {
          text = elemChildren(oItems[i])[0].innerText;
          
          if(text === content) {
            return alert('已经存在该事项');
          }
        }
      }

      if(this.isEdit) {
        elemChildren(oItems[this.curIdx])[0].innerText = this.content.value;
        // 清空input
        this.content.value = '';
        // 添加按钮文字回归
        this.addBtn.innerText = '添加项目';
        this.isEdit = false;
        oItems[this.curIdx].className = 'item';

      }else {
        var oLi = document.createElement('li');
        oLi.className = this.itemClass;
        oLi.innerHTML = itemTpl(content);
        this.oList.appendChild(oLi);
        this.content.value = '';
        this.content.focus();
      }

    },

    // li点击事件
    liClick: function(tar) {
      var _self = this,
          className = tar.className,
          oParent = elemParent(tar, 2)

      if(className === 'edit') {
        // 编辑
        this.isEdit = true;
        // inpu聚焦
        this.content.focus();
        activeItem.call(_self, tar); // 激活li的active类
        // 改变提交按钮为 第x项编辑
        this.addBtn.innerText = '第' + (this.curIdx + 1) + '项';
        // 让input回显li中值
        this.content.value = this.curLiConten;

      }else if(className === 'remove') {
        // 删除
        oParent.remove();
      }
    }
  }

  // li 编辑激活状态样式类
  function activeItem(tar) {
    var oParent = elemParent(tar, 2),
        oItems = this.oList.getElementsByClassName('item'),
        itemLen = oItems.length,
        item;

    this.curIdx = Array.prototype.indexOf.call(oItems, oParent);
    this.curLiConten = elemChildren(oItems[this.curIdx])[0].innerText;

    if(this.isEdit) {
      for(var i = 0; i < itemLen; i ++) {
        item = oItems[i];
        item.className = 'item'; // 还原类名
      }
      // 给当前li增加激活状态
      oParent.className += ' active';
    }
  }

  // li 模板
  function itemTpl(text) {
    return (
      '<p class="item-content">' + text + '</p>' +
      '<div class="btn-group">' +
        '<a href="javascript:;" class="edit"> 🐔 </a>' +
        '<a href="javascript:;" class="remove"> 🍵 </a>' +
      '</div>'
    )
  }

  // 切换显示隐藏状态
  function setInputShow(action) {
    if(action === 'open') {
      this.inputArea.style.display = 'block';
      this.showInputFlag = true;
    }else if(action === 'close') {
      this.inputArea.style.display = 'none';
      this.showInputFlag = false;
    }
  }

  // 错误信息模板
  function errorInfo(key) {
    return new Error(
      '您没有配置参数' + key + '请检查配置参数'
    )
  }

  new TodoList();
})(document.getElementsByClassName('wrap')[0]);